<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>超市收银系统</title>
    <link type="text/css" rel="stylesheet" href="fontsawesome/css/font-awesome.css"/>

    <style type="text/css">
        #form1{
            margin: 20px;
            line-height: 40px;
            font-size: 25px;
        }
        #form1 input {
            height: 30px;
            width: 200px;
        }
        .providerTable {
            width: 100%;
            border: 1px solid #ccc;
        }

        .providerTable tr {
            height: 30px;
            line-height: 30px;
            text-align: center;
        }

        .providerTable tr:nth-child(odd) {
            background: #f6f7f9;
        }

        .providerTable tr:hover {
            background: #e9f9ca;
        }

        .firstTr {
            border: 1px solid #d6dfe6;
            background: linear-gradient(to bottom, #f3f8fc, #ebf4f9, #e3f1fa, #e0f0fd, #d8e9fd);
        }

        .firstTr th {
            border-right: 2px solid rgba(209, 218, 223, 0.4);
        }

        .providerTable td a {
            margin-top: 10px;
            display: inline-block;
            margin-right: 10px;

        }
        .page-num-ul li{
            list-style: none;
        }
        .page-num-ul li{
            float: left;
            height: 35px;
            line-height: 35px;
            list-style: none;
            margin-left: 20px;
        }
        .page-num-ul li .page-go-form{
            margin-left: 20px;
        }
        .page-num-ul li input {
            width: 30px;
        }
    </style>
</head>
<body>

<table class="providerTable" cellpadding="0" cellspacing="0">
    <tr class="firstTr">
        <th width="30%" class="order" role="realName">用户姓名<span></span></th>
        <th width="30%" class="order" role="sex">用户性别<span></span></th>
        <th width="40%" class="order" role="salary">用户工资<span></span></th>
    </tr>

    <tr th:each="t,line : ${paSalary.items}">
        <td><span th:text="${t.realName }"></span></td>
        <td><span th:text="${t.sex == 1 ? '女' :(t.sex == 2 ? '男' :'保密') }"></span></td>
        <!--<td><span th:text="${roleList[t.roleId]}"></span></td>-->
        <!--<td><span th:text="${t.roleId }"></span></td>-->
        <td><span th:text="${t.salary }">&nbsp;元</span></td>
    </tr>
</table>

<div class="page-bar">
    <ul class="page-num-ul clearfix">
        <li th:object="${paSalary}">
            <span th:text="|共*{count}条记录|"></span>&nbsp;
            <span th:text="|*{curr}/*{total}|"></span>
        </li>&nbsp;&nbsp;
        <li><a href="javascript:void(0)">首页</a></li> &nbsp;
        <li><a href="javascript:void(0)">上一页</a></li> &nbsp;
        <li><a href="javascript:void(0)">下一页</a></li> &nbsp;
        <li><a href="javascript:void(0)">尾页</a></li> &nbsp;
        <li><span class="page-go-form">
			<label>跳转至</label> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
			<input type="text" name="inputPage" id="inputPage" class="page-key"
                   th:value="${paSalary.curr }"/>页
			<button type="button" class="page-btn">GO</button>
		</span>
        </li>
    </ul>

</div>


</body>
<script src="/js/jquery-2.2.1.min.js"></script>
<script src="/js/jump.js"></script>
<script type="text/javascript" th:inline="javascript">
    var curr = [[${paSalary?.curr ?: 1}]];
    var total = [[${paSalary?.total ?: 0}]];

    // alert(curr + " : " + total)

    //判断, 是否是第一页
    if(curr == 1){
        $(".page-num-ul a:lt(2)").hide();
    }
    //判断, 是否是最后一页
    if(curr == total){
        $(".page-num-ul a:gt(1)").hide();
    }



    $(".page-num-ul a:eq(0)").bind("click", function() {
        location = "/emp/findSalary?"+$("#form1").serialize()+"&curr=1"
    });
    $(".page-num-ul a:eq(1)").bind("click", function() {

        location = "/emp/findSalary?"+$("#form1").serialize()+"&curr=[[${paSalary.curr-1}]]"


    });
    $(".page-num-ul li a:eq(2)").bind("click", function() {

        location = "/emp/findSalary?"+$("#form1").serialize()+"&curr=[[${paSalary.curr+1}]]"
    });
    $(".page-num-ul a:eq(3)").bind("click", function() {
        location = "/emp/findSalary?"+$("#form1").serialize()+"&curr=[[${paSalary.total}]]"
    });






    $(".page-go-form .page-btn").bind("click", function() {
        //获取跳转目标页码
        var target = $(".page-go-form .page-key").val();

        //判断, target的值是否符合数值格式
        if(!/^\d+$/.test(target)) {
            $(".page-go-form .page-key").val(curr);
            return;
        }
        //判断, target是否在合理的范围内
        if(target == curr || target < 1 || target > total){
            $(".page-go-form .page-key").val(curr);
            return;
        }
        //跳转
        location = "/emp/findSalary?"+$("#form1").serialize()+"&curr="+target
    });
</script>
</html>